<template>
  <footer class="footer bd-top">
    <router-link to="/home">
        <i class="icons4 icons4-home"></i>
        <p>首页</p>
    </router-link>
    <router-link to="/fenlei">
        <i class="icons4 icons4-category"></i>
        <p>分类</p>
    </router-link>
    <router-link to="/global">
        <i class="icons4 icons4-global"></i>
        <p>全球尖货</p>
    </router-link>
    <router-link to="/cart">
        <i class="icons4 icons4-cart">
            <i class="bubble cartnum bgff6900">{{count}}</i>
        </i>
        <p>购物车</p>
    </router-link>
    <router-link to="/mineN">
        <i class="icons4 icons4-mine"></i>
        <p>我</p>
    </router-link>
</footer>
</template>
<script>
export default {
  computed: {
    count() {
        return this.$store.getters.getCartCount;
    }
  }
}
</script>
<style scoped>
.footer a{
  flex:0 1 20%;
}
.footer .icons4{
  width: .24rem;
  height: .24rem;
  margin: .06rem 0 .03rem;
}
.footer p{
  line-height: 1;
}
.footer .router-link-active{
  color: #ff6900;
}
.footer .icons4-home{
  background-position:-.71rem -.01rem;
}
.footer .icons4-category{
  background-position:-1.06rem -.01rem;
}
.footer .icons4-global{
  background-position:-1.76rem -3.54rem;
}
.footer .icons4-cart{
  background-position:-1.78rem -.01rem;
}
.footer .icons4-mine{
  background-position:-2.13rem -.01rem;
}
.footer .router-link-active .icons4-home{
  background-position:-.71rem -.36rem;
}
.footer .router-link-active .icons4-category{
  background-position:-1.06rem -.35rem;
}
.footer .router-link-active .icons4-global{
  background-position:-1.77rem -3.9rem;
}
.footer .router-link-active .icons4-cart{
  background-position:-1.78rem -.35rem;
}
.footer .router-link-active .icons4-mine{
  background-position:-2.13rem -.35rem;
}
.footer .icons4-cart{
	position: relative;
}
</style>
